<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>诗瑶博客移动端主页</title>
    <!-- 引入重置样式 -->
    <link rel="stylesheet" href="./css/reset.css">
    <!-- 引入当前页面样式 -->
    <link rel="stylesheet" href="./y-css/y-detail.css">
</head>
<body>
    <!-- 头部返回 -->
    <div class="header-top">
        <div class="top-head">&nbsp;瑶瑶日记欢迎你</div>
    </div>
     <!-- 标题 -->
        
        <div class="img-row-one">
          <img src="./image/2.jpg">
          <div></div>
          <img src="./image/22.jpg">
        </div>
        <div class="img-row-two">
          <img src="./image/222.jpg">
          <div></div>
          <img src="./image/2222.jpg">
          <div></div>
          <img src="./image/22222.jpg">
        </div>
      
     
        <!-- 内容区 -->
        <div class="detail-content">
            <div class="title">
              《开心瑶瑶》
            </div>
            <div class="contet-time">
              &nbsp;&nbsp;发布时间&nbsp;:&nbsp;&nbsp;2024-07-12
            </div>
            <div class="content">
              瑶瑶,小瑶瑶,可可爱爱的小诗瑶,今天的瑶瑶很开心
            </div>
        </div>
        <div class="page-end">
        </div>
       <div class="footer">
         <div class="foot one"><a href="yd.html">首页</a></div>
         <div class="foot two"><a href="yd-detail.html">瑶瑶日记</a></div>
         <div class="foot three"><a href="yd-vedio.html">关于瑶瑶</a></div>
         <div id="myDiv" class="foot four"><a href="#">联系我们</a></div>
       </div>
   <!-- 弹窗的HTML结构 -->
   <div id="myModal" class="modal">
    <!-- 模态内容 -->
    <div class="modal-content">
    <span class="close">&times;</span>
    <p>欢迎加入瑶瑶公主粉丝团--章爸爸周妈妈！</p>
    </div>
</div>

       <script>
        // 获取元素
      var myDiv = document.getElementById('myDiv');
      var myModal = document.getElementById('myModal');
      var span = document.getElementsByClassName("close")[0];
       
      // 当点击div时显示弹窗
      myDiv.onclick = function() {
        myModal.style.display = "block";
      }
       
      // 当点击关闭按钮时隐藏弹窗
      span.onclick = function() {
        myModal.style.display = "none";
      }
       
      // 当点击其他地方时（除了弹窗和关闭按钮）隐藏弹窗
      window.onclick = function(event) {
        if (event.target == myModal) {
          myModal.style.display = "none";
        }
      }
      </script>
</body>


</html>